<template>
  <div>
    <div class="heard-right">
      <stageList
        width="250px"
        class="inline mr10"
        @stageCallback = 'stageCallback'></stageList>
    </div>
    <div class="details-content">
      <button class="button-block second-right" v-show="boardSetupMaintain" @click="save">保存</button>
      <div class="details-content-left">
        <div class="menu-head clear">
          <p class="menu-title">工程列表</p>
        </div>
        <div class="p20">
          <div style="height: 640px" v-bar>
            <zz-tree
              :treeData="treeList"
              :options="options"
              @node-click="nodeClick"
            ></zz-tree>
          </div>
        </div>

      </div>
      <div class="details-content-right">
        <div class="menu-head clear">
          <p class="menu-title">工程信息</p>
        </div>
        <div class="p20" v-if="projectType !== 0">
          <p class="tableP"><span>基本信息</span></p>
          <div class="tableClass mt15" v-if="projectType === 1">
            <table style="width: 100%">
              <tr>
                <th>分期编码</th>
                <td colspan="4">
                  <input
                    class="input-n240"
                    v-model="stageInformationList.stageCode"
                    :disabled="true"
                    style="width: 100%" />
                </td>
              </tr>
              <tr>
                <th>分期名称</th>
                <td colspan="4">
                  <input class="input-n240"
                         v-model="stageInformationList.stageName"
                         :disabled="true"
                         style="width: 100%">
                </td>
              </tr>
              <tr>
                <th>建设单位</th>
                <td colspan="2">
                  <input class="input-n240"
                         v-model="stageInformationList.constructionUnit"
                         placeholder="请填写建设单位"
                         style="width: 100%">
                </td>
                <th>设计单位</th>
                <td colspan="2">
                  <input class="input-n240"
                         v-model="stageInformationList.designUnit"
                         placeholder="请填写设计单位"
                         style="width: 100%">
                </td>
              </tr>
              <tr>
                <th>结构形式</th>
                <td colspan="4">
                  <input
                    class="input-n240"
                    v-model="stageInformationList.structuralStyle"
                    placeholder="请填写主要的结构形式"
                    style="width: 100%" />
                </td>
              </tr>
            </table>
          </div>
          <div class="tableClass mt15" v-if="projectType === 2">
            <table style="width: 100%">
              <tr>
                <th>楼层编号</th>
                <td colspan="4">
                  <input
                    class="input-n240"
                    v-model="buildInformationList.buildingCode"
                    :disabled="true"
                    style="width: 100%" />
                </td>
              </tr>
              <tr>
                <th>楼栋名称</th>
                <td colspan="2">
                  <input class="input-n240"
                         v-model="buildInformationList.buildingName"
                         :disabled="true"
                         style="width: 100%">
                </td>
                <th>楼栋简称</th>
                <td colspan="2">
                  <input class="input-n240"
                         v-model="buildInformationList.shortName"
                         placeholder="请填写楼栋简称"
                         style="width: 100%">
                </td>
              </tr>
              <tr>
                <th>产品类型名称</th>
                <td colspan="2">
                  <zz-select
                    v-if="buildInformationList.isMdm === 1"
                    style="width: 100%"
                    :border= false
                    :options="{width: '100%'}"
                    :option="productTypes"
                    :name = "productTypesName"
                    @optionClick="productTypesCallBack"></zz-select>
                  <input class="input-n240"
                         v-else
                         v-model="buildInformationList.productType"
                         disabled
                         placeholder="请填写产品类型名称"
                         style="width: 100%">
                </td>
                <th>装修标准</th>
                <td colspan="2">
                  <zz-select
                    style="width: 100%"
                    :border= false
                    :options="{width: '100%'}"
                    :option="decorationStandards"
                    :name = "decorationName"
                    @optionClick="decorationCallback"></zz-select>
                </td>
              </tr>
              <tr>
                <th>套数(户数)</th>
                <td colspan="2">
                  <input class="input-n240"
                         v-model="households"
                         v-validation="{number: true, query: 'households'}"
                         placeholder="请填写套数"
                         style="width: 100%">
                </td>
                <th>楼层数</th>
                <td colspan="2">
                  <input class="input-n240"
                         placeholder="请填写楼层数"
                         v-validation="{number: true, query: 'buildingTier'}"
                         v-model="buildingTier"
                         style="width: 100%">
                </td>
              </tr>
              <tr>
                <th>标注层高(米)</th>
                <td colspan="4">
                  <input
                    class="input-n240"
                    placeholder="请填写标注层高"
                    v-validation="{numberDot: true, query: 'standardHigh'}"
                    v-model="standardHigh"
                    style="width: 100%" />
                </td>
              </tr>
              <tr>
                <th>监理工程师</th>
                <td colspan="2">
                  <input class="input-n240"
                         placeholder="请填写监理工程师姓名"
                         v-model="buildInformationList.supervisingEnginer"
                         style="width: 100%">
                </td>
                <th>楼栋长</th>
                <td colspan="2">
                  <input class="input-n240"
                         placeholder="请填写楼栋长"
                         v-model="buildingLeader"
                         style="width: 100%">
                </td>
              </tr>
            </table>
          </div>

          <p class="tableP mt20"><span>里程碑节点计划</span></p>
          <div class="tableClass-layered mt15">
            <table style="width: 100%; text-align: center">
              <tr>
                <th>节点编码</th>
                <th>里程碑节点</th>
                <th>计划开始日期</th>
              </tr>
              <tr v-for="(item, index) in dataList">
                <td>{{item.nodeNum}}</td>
                <td>{{item.nodeName}}</td>
                <td>
                  <zz-date
                    :dateSouce = "index"
                    :place = "item.startTime || '选择时间'"
                    @change="handleChange"
                    type="day"
                    :clearPosition="{top: 3, right:8}"
                    style="width: 80px">
                  </zz-date>
                </td>
              </tr>
            </table>
          </div>

          <p class="tableP mt20"><span>建筑面积</span></p>
          <div class="tableClass mt15">
            <table style="width: 100%">
              <tr v-if="projectType === 1">
                <th>建筑面积</th>
                <td colspan="3">
                  <input class="input-n240"
                         v-model="area"
                         placeholder="请填写建筑面积"
                         v-validation="{numberDot: true, query: 'area'}"
                         style="width: 20%">
                  <span style="line-height: 21px">平方米</span>
                </td>
              </tr>
              <tr>
                <th>地上面积</th>
                <td>
                  <input class="input-n240"
                         v-model="overgroundArea"
                         placeholder="请填写地上面积"
                         v-validation="{numberDot: true, query: 'overgroundArea'}"
                         style="width: 48%">
                  <span style="line-height: 21px">平方米</span>
                </td>
                <th>地下面积</th>
                <td>
                  <input class="input-n240"
                         v-model="undergroundArea"
                         placeholder="请填写地下面积"
                         v-validation="{numberDot: true, query: 'undergroundArea'}"
                         style="width: 48%">
                  <span style="line-height: 21px">平方米</span>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    name: 'info',
    data () {
      return {
        projectType: 1,
        dataList: [],
        treeList: [],
        options: {
          lazy: true,
          load: this.loadingChild
        },
        buildInformationList: {},
        stageInformationList: {},
        decorationStandards: {},
        decorationName: '',
        decorationId: 0,
        stageId: 0,
        stageName: '',
        sectionId: 0,
        buildingId: 0,
        area: '',
        overgroundArea: '',
        undergroundArea: '',
        households: '',
        buildingTier: '',
        standardHigh: '',
        productTypes: {},
        productTypesName: '',
        productTypesQuery: '',
        buildingLeader: '',
        resetProduct: 0,
        resetDecorate: 0,
        boardSetupMaintain: false
      }
    },
    watch: {
      stageId () {
        this.findBaseTree()
      },
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser',
        stageList: 'getstageList',
        stageListDefault: 'getstageListDefault'
      })
    },
    mounted () {
      this.getAuth()
      this.stageId = this.stageListDefault.stageId
      this.stageName = this.stageListDefault.stageName
    },
    methods: {
      getAuth () {
        let data = {
          'query.project_id': this.currentUser.pjId,
          'query.fun_code': 'p_BoardSetup_data_maintain'
        }
        this.$axios({
          method: 'post',
          url: `${this.$site.companyServer}/front/hasFunction.htm`,
          data: this.$qs.stringify(data)
        }).then(res => {
          this.boardSetupMaintain = res.data.hasFunction
        })
      },
      findBaseTree () {
        this.treeList = []
        let obj = {}
        Object.assign(obj, {label: this.stageName})
        Object.assign(obj, {stageId: this.stageId})
        Object.assign(obj, {children: []})
        this.$set(obj, 'open', false)
        this.$set(obj, 'checked', true)
        this.treeList.push(obj)
        this.projectType = 1
        this.findProjectStage(this.stageId)
      },
      // 异步获取子标签
      async loadingChild (node) {
        let plug = await new Promise((resolve, reject) => {
          this.$axios({
            method: 'get',
            url: `${this.$site.videoServer}/api/constructionList/building?pjId=${this.currentUser.pjId}&stageId=${node.stageId}`
          }).then(res => {
            if (res.data.errorMsg) {
              this.$message.error(res.data.errorMsg)
            } else {
              let list = []
              res.data.data.forEach((x) => {
                let obj = {}
                Object.assign(obj, {label: x.mdgName})
                Object.assign(obj, {stageId: x.stageId})
                Object.assign(obj, {sectionId: x.sectionId})
                Object.assign(obj, {buildingId: x.buildingId})
                this.$set(obj, 'open', false)
                this.$set(obj, 'checked', false)
                this.$set(obj, 'closeLeaf', true)
                list.push(obj)
              })
              resolve(list)
            }
          })
        })
        let tem = this.getParentNode(node, this.treeList)
        this.$set(tem, 'children', plug)
        Promise.resolve(plug)
      },
      getParentNode (node, treeData) {
        let tem
        let postions = node.key.split('-')
        for (let [index, item] of postions.entries()) {
          switch (index) {
            case 0:
              break
            case 1:
              tem = treeData[item]
              break
            default:
              tem = tem.children[item]
          }
        }
        return tem
      },
      nodeClick (item) {
        if (item.buildingId) {
          this.projectType = 2
          this.findInformation(item.buildingId)
          this.sectionId = item.sectionId
          this.buildingId = item.buildingId
          this.stageInformationList = {}
        } else if (item.stageId) {
          this.projectType = 1
          this.findProjectStage(item.stageId)
          this.buildInformationList = {}
        } else {
          this.dataList = []
          this.buildInformationList = {}
          this.stageInformationList = {}
        }
      },
      // 获取楼栋信息
      findInformation (id) {
        this.$axios({
          method: 'get',
          url: `${this.$site.videoServer}/api/building/information?buildingId=${id}`
        }).then(res => {
          if (res.data.errorMsg) {
            this.$message.error(res.data.errorMsg)
          } else {
            this.buildInformationList = res.data.data
            this.area = this.buildInformationList.area
            this.overgroundArea = this.buildInformationList.overgroundArea
            this.undergroundArea = this.buildInformationList.undergroundArea
            this.households = this.buildInformationList.households
            this.buildingTier = this.buildInformationList.buildingTier
            this.standardHigh = this.buildInformationList.standardHigh
            this.buildingLeader = this.buildInformationList.buildingLeader
            res.data.data.decorationStandards.forEach((x, index) => {
              if (index === 0) {
                this.decorationName = x.dictValue
                this.decorationId = x.dictId
              }
              this.decorationStandards[x.dictId] = x.dictValue
            })
            if (this.buildInformationList.decorationStandardId) {
              this.decorationId = this.buildInformationList.decorationStandardId
              this.decorationName = this.decorationStandards[this.decorationId]
            }
            if (this.buildInformationList.isMdm === 1) {
              this.buildInformationList.productTypes.forEach((item, index) => {
                if (index === 0) {
                  this.productTypesName = item.dictValue
                  this.productTypesQuery = item.dictId
                }
                this.productTypes[item.dictId] = item.dictValue
              })
              if (this.buildInformationList.productTypeId) {
                this.productTypesQuery = this.buildInformationList.productTypeId
                this.productTypesName = this.productTypes[this.productTypesQuery]
              }
            } else {
              this.productTypesQuery = this.buildInformationList.productTypeId
            }
            this.dataList = []
            res.data.data.nodes.forEach(x => {
              let obj = {}
              Object.assign(obj,{nodeNum: x.nodeNum})
              Object.assign(obj,{nodeName: x.nodeName})
              if (x.startTime) {
                Object.assign(obj,{startTime: x.startTime})
              } else {
                Object.assign(obj,{startTime: ''})
              }
              this.dataList.push(obj)
            })
          }
        })
      },
      // 获取分期信息
      findProjectStage (id) {
        this.$axios({
          method: 'get',
          url: `${this.$site.videoServer}/api/stageInformat/findProjectStageDetail?stageId=${id}`
        }).then(res => {
          if (res.data.errorMsg) {
            this.$message.error(res.data.errorMsg)
          } else {
            this.stageInformationList = res.data.data
            this.area = this.stageInformationList.area
            this.overgroundArea = this.stageInformationList.upArea
            this.undergroundArea = this.stageInformationList.underArea
            this.findStageNodePlanList(id)
          }
        })
      },
      findStageNodePlanList (id) {
        this.$axios({
          method: 'get',
          url: `${this.$site.videoServer}/api/stageInformat/findStageNodePlanList?stageId=${id}`
        }).then(res => {
          if (res.data.errorMsg) {
            this.$message.error(res.data.errorMsg)
          } else {
            this.dataList = []
            res.data.data.forEach(x => {
              let obj = {}
              Object.assign(obj,{nodeNum: x.nodeNum})
              Object.assign(obj,{nodeName: x.nodeName})
              if (x.startTime) {
                Object.assign(obj,{startTime: x.startTime})
              } else {
                Object.assign(obj,{startTime: ''})
              }
              this.dataList.push(obj)
            })
          }
        })
      },
      handleChange (val, index) {
        if (val) {
          this.dataList[index].startTime = val
        } else {
          this.dataList[index].startTime = ''
        }
      },
      productTypesCallBack (item) {
        this.productTypesQuery = item.key
        this.productTypesName = item.value
      },
      save () {
        this.$vaildation(this).then(() => {
          let data = {}
          let url = ''
          if (this.projectType === 2) {
            data = {
              'companyId': this.currentUser.coId,
              'projectId': this.currentUser.pjId,
              'stageId': this.stageId,
              'sectionId': this.sectionId,
              'buildingId': this.buildingId,
              'decorationStandardId': this.decorationId,
              'buildingTier': this.buildingTier,
              'standardHigh': this.standardHigh,
              'supervisingEngineer': this.buildInformationList.supervisingEnginer,
              'buildingLeader': this.buildingLeader,
              'isMdm': this.buildInformationList.isMdm,
              'overgroundArea': this.overgroundArea,
              'undergroundArea': this.undergroundArea,
              'productTypeId': this.productTypesQuery,
              'households': this.households,
              'shortName': this.buildInformationList.shortName,
              'nodes': JSON.stringify(this.dataList)
            }
            url = `${this.$site.videoServer}/api/building/save`
          } else {
            data = {
              'stageId': this.stageId,
              'constructionUnit': this.stageInformationList.constructionUnit,
              'designUnit': this.stageInformationList.designUnit,
              'structuralStyle': this.stageInformationList.structuralStyle,
              'area': this.area,
              'underArea': this.undergroundArea,
              'upArea': this.overgroundArea,
              'stageNode': JSON.stringify(this.dataList)
            }
            url = `${this.$site.videoServer}/api/stageInformat/saveOrUpdateStageInfo`
          }
          this.$axios({
            method: 'post',
            url: url,
            data: this.$qs.stringify(data, {indices: false})
          }).then(res => {
            if (res.data.errorMsg) {
              this.$message.error(res.data.errorMsg)
            } else {
              this.$message.success(res.data.data)
            }
          })
        })
      },
      decorationCallback (item) {
        this.decorationId = item.key
        this.decorationName = item.value
      },
      stageCallback (val) {
        this.stageId = val.key
        this.stageName = val.value
      }
    }
  }
</script>
<style lang="scss" scoped>
  .details-content {
    background: #fff;
    display: table;
    box-sizing: border-box;
    width: 100%;
    .menu-head{
      border-bottom: 1px $color-line solid;
      .menu-title{
        padding: 15px 22px;
      }
    }
    .details-content-left {
      display: table-cell;
      width: 20%;
      vertical-align: top;
      box-sizing: border-box;
      border-right: 1px $color-line solid;
    }
    .details-content-right{
      display: table-cell;
      vertical-align: top;
    }
  }
  .heard-right{
    position: absolute;
    top: 65px;
    right: 20px;
  }
  .second-right{
    position: absolute;
    top: 118px;
    right: 20px;
  }
</style>
